スタートアップ企業のためのSaaS「Go_SaaS 三種の神器（Auth0 / Stripe / CircleCI）」を10分で試す！ #Go_SaaS

Go_SaaS 三種の神器は、AWS上にシステムを構築しているAuth0、CircleCI、Stripeの3社によるISV・スタートアップ企業のためのSaaS化支援プログラムです。3つを短時間で試すための手順を書いてみました。

#初心者向け

諏訪悠紀

2019.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

三種の神器を短時間で試してみよう

Go_SaaS 三種の神器は、AWS上にシステムを構築しているAuth0、CircleCI、Stripeの3社による ISV・スタートアップ企業のためのSaaS化支援プログラム です。

Go_SaaS 三種の神器 - ISV・スタートアップ企業のための SaaS化支援プログラムです。

それぞれ以下の機能を提供するSaaSとなっています。どのようなビジネスを始める上でも、必ず「土台」として必要になるものです。

Auth0 : ID管理のSaaS。ID/Passwordを使ったログイン、ソーシャルログイン、エンタープライズログインなどに柔軟に対応。
CircleCI : 継続的インテグレーション/継続的デプロイ（CI/CD）のSaaS。ブランチごとのワークフローも自由にカスタマイズできる。
Stripe : オンライン決済のSaaS。クレジットカード決済・定期購読や、ApplePay/GooglePayといったモバイル向けの決済にも対応。

三種の神器を短い時間でまずはサクッとで試してみたい！ という人のために、3つのSaaS（+GitHub）全てを導入し、スタートラインに立てるようになるまでの手順を書いてみました。

なお、各サービスのアカウントは作成済みの前提で進めます。いずれのサービスも アカウント登録が簡単・無料で始められる ようになっていますので、まずはアカウントをサクッと用意してから臨んでください。

GitHubリポジトリを作成する

まずはGitHubリポジトリを適当な名前で作成。go-saas-sample としました。空リポジトリをCloneしておきます。

Auth0の導入

次にAuth0のテナントを作り、アプリケーションを立ち上げるところまで進めます。テナント名は適当に。go-saas-sample としました。

左メニューの「Application」の「Default App」を選び、「Quick Start」からアプリケーションの種類を選びます。今回は「Single-Page App」の「Vue」を選びました。

「DOWNLOAD SAMPLE」をクリックし、サンプルプログラムをダウンロードします。

ダウンロードしたZipファイルを解凍し、先ほどCloneしたリポジトリ配下に置きます。その後、ルートディレクトリで以下を実行します。

$ yarn install
$ yarn serve

http://localhost:3000/ で起動します。

次にAuth0のダッシュボードに戻り、「Default App」の「Settings」タブの以下をそれぞれ設定します。

設定項目	値
Allowed Callback URLs	`http://localhost:3000/callback`
Allowed Web Origins	`http://localhost:3000`

これでログインまで試せます。右上の「Login」をクリックするとログインを試せますので、時間のある方は試してみてください。

Stripeの導入

まずアカウントを作成します。

あとはAPIキーを確認するだけで、実装まで進めます。左メニューの「開発者」から「APIキー」を選び、「公開可能キー」と「シークレットキー」をメモしておきます。

あとは実装です。Auth0から作成したサンプルの public/index.html と src/views/Home.vue をそれぞれ書き換えます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>01-login</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but 01-login doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<template>
  <div id="form-container">
    <form id="payment-form" @submit="onSubmit">
      <div class="form-row">
        <label for="card-element">
          Credit or debit card
        </label>
        <div id="card-element">
        </div>
        <div id="card-errors" role="alert"></div>
      </div>
      <button>Submit Payment</button>
    </form>
  </div>
</template>

<script>
const stripe = Stripe('【Stripeの公開可能キー】');

export default {
  name: "home",
  data() {
    return {
      card: {}
    }
  },
  mounted() {
    const elements = stripe.elements();
    const style = {
      base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };
    this.card = elements.create('card', {style: style});
    this.card.mount('#card-element');
    this.card.addEventListener('change', function(event) {
      const displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });
  },
  methods: {
    async onSubmit(event) {
      event.preventDefault();
      const result = await stripe.createToken(this.card);
      if (result.error) {
        const errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        alert(`token : ${result.token.id}`);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#payment-form {
  margin: 2em;
  width: 300px;
}
#card-element {
  margin: 1em 0 1em 0;
  width: 300px;
}
</style>

これで実行してみます。テスト用のクレジットカード番号をフォームに入力し、Submitしたらアラートでトークンが表示されれば成功です。

あとはトークンを渡し、サーバーサイド側で決済を実行…といきたいところですが、今回はサーバーサイドを用意する代わりに、コマンドライン（cURL）から決済を実行してみます。

$ curl https://api.stripe.com/v1/charges \
  -u 【Stripeのシークレットキー】 \
  -d amount=2000 \
  -d currency=jpy \
  -d source=【クレジットカードのトークン】 \
  -d description="Example charge"

ダッシュボードを見ると、決済されていることが確認できます。

CircleCIの導入

最後にCircleCIを使った、継続的インテグレーション（CI）を導入します。

まず .circleci/config.yml を作ります。

version: 2.1
 
executors:
  default:
    docker:
      - image: circleci/node:10
 
commands:
  npm_install:
    steps:
      - restore_cache:
          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: install npm
          command: yarn install
      - save_cache:
          key: dependency-cache-{{ checksum "package.json" }}
          paths:
              - node_modules
 
jobs:
  build:
    executor: default
    working_directory: ~/repo
    steps:
      - checkout
      - npm_install
      - yarn build

これまでの変更を全てCommit＆Pushします。

次にCircleCIのダッシュボードを開き、左メニューから「ADD PROJECTS」を選びます。リポジトリ一覧から、今回使っているリポジトリの「Set Up Project」をクリックします。